<template>
  <el-menu :default-active="active" :collapse="false">
    <template v-for="(item, index) in _.uniqBy(routes, 'menuName')" :key="index">
      <el-sub-menu :index="item.name" v-if="item.children && !item.hidden">
        <template #title>
          <img
            class="icon"
            :src="item.name === subActive ? item.imageUrlActive : item?.imageUrl"
            alt=""
          />
          <span>{{ item.menuName }}</span>
        </template>
        <template v-for="(i, index) in item.children" :key="index">
          <el-menu-item v-if="!i.hidden" @click="menuClick(i)" :index="i.path">
            {{ i.menuName }}
          </el-menu-item>
        </template>
      </el-sub-menu>
      <el-menu-item
        :index="item.path"
        v-if="!item.children && !item.hidden"
        @click="menuClick(item)"
      >
        <img
          :class="{ icon: true }"
          :src="item.path === active ? item.imageUrlActive : item?.imageUrl"
          alt=""
        />
        <span>{{ item.menuName }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
import router from '@/router'
import { ref, watch } from 'vue'
import { routes } from '@/router/routes'
import { useCommonStore } from '@/stores/common'
import _ from 'lodash'
const active = ref()
const subActive = ref()
watch(
  () => router.currentRoute.value,
  (toPath) => {
    const name: string = toPath.path as string
    if (name) {
      const url = name.split('/')[1]
      active.value = '/' + url
    }
  },
  { immediate: true, deep: true }
)
watch(
  () => useCommonStore().currentRoute,
  (info) => {
    subActive.value = info?.parentName
  }
)
const menuClick = (item: commonTypes.menuItem) => {
  useCommonStore().addBreadcrumbs(item)
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border-right: none !important;
  padding-top: 30px;
}
.menuBg {
  width: 57%;
  height: 70px;
  margin-bottom: 20px;
}
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
  color: #2e62d8 !important;
  font-weight: bold !important;
}
:deep(.el-menu-item.is-active) {
  color: #2e62d8 !important;
  background: #e6eefe !important;
  position: relative;
  font-weight: 600 !important;
  &::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 0px;
    width: 4px;
    height: 100%;
    background: #2e62d8;
  }
}
.fire {
  width: 23px !important;
  height: 28px !important;
  margin: 0 !important;
  margin-right: 5px !important;
}
.icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  margin-left: 4px;
}
</style>
